/* eslint react/prefer-stateless-function:0, react/prop-types:0 */
import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { Button, Form, Icon, Input } from 'antd';
import * as actions from '../../actions/signupAction';
import style from './style.css';
const FormItem = Form.Item;

@Form.create()
@connect(state => ({
  login: state.login,
}), actions)
export default class extends Component {

  constructor(props) {
    super(props);
    document.title = '注册 - 中正投资官网';
    this.changeInputValue = this.changeInputValue.bind(this);
    this.checkIdNumber = this.checkIdNumber.bind(this);
    this.checkPhone = this.checkPhone.bind(this);
    this.checkPassword = this.checkPassword.bind(this);
    this.equalPassword = this.equalPassword.bind(this);
  }

  checkPhone(rule, val, cb) {
    if (!/^1\d{10}$/img.test(val)) {
      cb('请输入正确的手机号');
    }
    cb();
  }

  checkIdNumber(rule, val, cb) {
    if (!/^\d{17}(\d|X|x)$/img.test(val)) {
      cb('请输入正确的身份证号');
    }
    cb();
  }

  checkPassword(rule, val, cb) {
    if (val && val.length < 6 || /^\d+$/img.test(val) || /^[a-zA-Z]+$/img.test(val)) {
      cb('请输入不少于6位的字母和数字的组合作为密码');
    }
    cb();
  }

  equalPassword(rule, val, cb) {
    const { getFieldValue } = this.props.form;
    if (val && val !== getFieldValue('password')) {
      cb('两次密码输入不一致');
    }
    cb();
  }

  changeInputValue(e, key) {
    const val = e.target.value;
    this.props.change(key, val);
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.submit(values);
      }
    });
  };

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <div className={style.container}>
        <Link to={'/'} style={{ position: 'absolute', left: '30px', top: '30px' }}>返回首页</Link>
        <div className={style.logo}></div>
        <div style={{ margin: '0 auto 30px', fontSize: '20px' }}>注册</div>
        <Form onSubmit={this.handleSubmit} className={style.form}>
          <FormItem hasFeedback>
            {getFieldDecorator('username', {
              rules: [
                { required: true, message: '请输入姓名' },
              ],
              validateTrigger: 'onBlur',
            })(
              <Input
                prefix={<Icon type="user" style={{ fontSize: 13 }} />}
                placeholder="请输入姓名"
                onChange={e => this.changeInputValue(e, 'username')}
                type="text"
              />
            )}
          </FormItem>
          <FormItem hasFeedback>
            {getFieldDecorator('id_number', {
              rules: [
                { required: false, message: '请输入身份证号' },
                { validator: this.checkIdNumber },
              ],
              validateTrigger: 'onBlur',
            })(
              <Input
                prefix={<Icon type="solution" style={{ fontSize: 13 }} />}
                placeholder="请输入身份证号"
                onChange={e => this.changeInputValue(e, 'id_number')}
                type="text"
              />
            )}
          </FormItem>
          <FormItem hasFeedback>
            {getFieldDecorator('phone', {
              rules: [
                { required: false, message: '请输入手机号' },
                { validator: this.checkPhone },
              ],
              validateTrigger: 'onBlur',
            })(
              <Input
                prefix={<Icon type="phone" style={{ fontSize: 13 }} />}
                placeholder="请输入手机号"
                onChange={e => this.changeInputValue(e, 'phone')}
                type="number"
              />
            )}
          </FormItem>
          <FormItem hasFeedback>
            {getFieldDecorator('password', {
              rules: [
                { required: false, message: '请输入密码' },
                { validator: this.checkPassword },
              ],
              validateTrigger: 'onBlur',
            })(
              <Input
                prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
                placeholder="请输入密码"
                onChange={e => this.changeInputValue(e, 'password')}
                type="password"
              />
            )}
          </FormItem>
          <FormItem hasFeedback>
            {getFieldDecorator('rePassword', {
              rules: [
                { required: true, message: '请再次输入密码' },
                { validator: this.equalPassword },
              ],
              validateTrigger: 'onBlur',
            })(
              <Input
                prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
                placeholder="请再次输入密码"
                onChange={e => this.changeInputValue(e, 'rePassword')}
                type="password"
              />
            )}
          </FormItem>
          <FormItem>
            <Button className={style.btn} size="large" type="primary" htmlType="submit"
                    onClick={this.handleSubmit}>注册</Button>
          </FormItem>
        </Form>
      </div>
    );
  }
};
